<script setup lang="ts">
import FormTemplate from './FormTemplate.vue';
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref, unref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRoute,useRouter } from 'vue-router'
import { useEventBus } from '@/hooks/event/useEventBus'
import Form from '@/components/Form/src/Form.vue';
import { EmployeeData } from '@/api/table/types';
import { getEmployees, updateEmployees } from '@/api/table'

const route = useRoute()
const { emit } = useEventBus()

const { push, go } = useRouter()

const { t } = useI18n()

const formRef = ref<ComponentRef<typeof FormTemplate>>()

const loading = ref(false)

const update = async () => {
  const form = unref(formRef)
  const formData = await form?.submit()
  if (formData) {
    loading.value = true
    const res = await updateEmployees(empId.value,formData)
      .catch(() => {})
      .finally(() => {
        loading.value = false
      })
    if (res) {
      push('/employees')
    }
  }
}

const empId = ref(route.params.id)

const currentRow = ref<Nullable<EmployeeData>>(null)

const getTableDet = async () => {
  const res = await getEmployees({ empId: empId.value })
  const list = res?.data?.records
  if (list && list.length > 0) {
    currentRow.value = list[0]
  }
}

getTableDet()

</script>

<template>
  <ContentDetailWrap :title="t('exampleDemo.add')">
    <FormTemplate ref="formRef" :current-row="currentRow"/>

    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
      <BaseButton type="primary" :loading="loading" @click="update"
        >{{ t('exampleDemo.save') }}
      </BaseButton>
    </template>
  </ContentDetailWrap>
</template>
